<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>学生信息</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

        <link rel="stylesheet" type="text/css" href="css/base.css">
        <style>
			.content1 {
				width: 100%;
				padding: 0;
				margin: auto;
				float: right; 
				height: 100%;
			}
			.title {
				width: 100%;
				padding-left: 2%;
				margin: auto;
				float: right;
				font-size: medium;
				height: 60px;
				background-color: rgb(189, 215, 238);
				color: rgb(48, 84, 150);
				line-height: 60px;
			}
			span {
				
				color:darkblue;
				font-size: medium;
			}
			.top{
				margin-top: 7%;
			}
			.tips{
				margin-left: 50px;
			}
			.radius{
				border-radius: 5px;
				border-color: #0a0a0a;
			}
			.btn-primary{
				margin-left:20%;
				background-color: #305496;
			}
			.table {
				width: 60%;
				margin: 30px auto;
			}
			.text-middle{
				text-align: center;
			}
			td{
				text-align: center;
			}
			.model-margin-top{
				margin-top: 10px;
			}
			.col-md-3{
				width: 13%;
			}
			.col-md-4{
				width: 25%;
			}
			.idcard{
				width: 18%;
				 
			}
			.idleft{
				padding-left: 7px;
				padding-right: 23px;
			}
		</style>
		<script>
			$(document).ready(function(){
				var perm = '[[${session.perm}]]';
				var admin = '[[${session.admin}]]';
				if(admin == 0){
					document.getElementById("add").style.display='none'; 
					document.getElementById("tips").style.display='none';
				}else{
					document.getElementById("add").style.display='block';
					document.getElementById("tips").style.display='block';
				}
				if(perm == 0){
					document.getElementById("session").style.display='none';
					document.getElementById("grade").style.display='none';
					document.getElementById("classname").style.display='none';
				}else{
					document.getElementById("session").style.display='block';
					document.getElementById("grade").style.display='block';
					document.getElementById("classname").style.display='block';
				}
				var session = "";
				var grade = "";
				var classname = "";
				var id = "";
				var limit = 10;
                var offset = 0;
                var datalength = 0;
                var datarow = '';
                
                function dataload(session, grade, classname, id, limit, offset, datalength){
                    $.ajax({
						type:'POST',
						url:'/studentsearch',
						data:{session:session,grade:grade,classname:classname,id:id, limit: limit, offset: offset},
						dataType:'json',
						success:function(data){
							var vinnertable = document.getElementById("studenttable")
							var vinnerstring = ""
							document.getElementById("errormsg").style.display='none';
							vinnertable.innerHTML = vinnerstring
							datalength = parseInt(data.count[0].count);
							if (data.data.length != 0){
								vinnerstring = '<tr style="background-color: #ccc;"><th class="text-middle headnone" width="2%">№</th><th class="text-middle" width="20%">学号</th><th class="text-middle" width="20%">姓名</th><th class="text-middle" width="10%">性别</th><th class="text-middle" width="20%">班级</th><th class="text-middle" width="28%">联系电话</th></tr>'
								for(i=0; i< data.data.length; i++){
									if(admin == 0){
										vinnerstring += '<tr><td>' + String(i + 1) + '</td><td>' + data.data[i].stu_id + '</td><td>' + data.data[i].name + '</td><td>' + data.data[i].sex + '</td><td>' + String(data.data[i].grade) + '年' + String(data.data[i].class_num) + '班</td><td>' + data.data[i].tele + '</td></tr>'
									}else{
										vinnerstring += '<tr><td>' + String(i + 1) + '</td><td><a class="change" name="change" data-toggle="modal" data-target="#myModal">' + data.data[i].stu_id + '</a></td><td>' + data.data[i].name + '</td><td>' + data.data[i].sex + '</td><td>' + String(data.data[i].grade) + '年' + String(data.data[i].class_num) + '班</td><td>' + data.data[i].tele + '</td></tr>'
									}
								}
								vinnertable.innerHTML = vinnerstring
							}else{
								document.getElementById("errormsg").style.display='block';
								document.getElementById("paging").style.display = 'none';
							}
							document.getElementById("paging").style.display = 'block';
                            if(offset == 0){
                                document.getElementById("firstpage").disabled = true;
                                document.getElementById("previous").disabled = true;
                            }else{
                                document.getElementById("firstpage").disabled = false;
                                document.getElementById("previous").disabled = false;
                            }

                            if(offset >= (datalength - limit) || datalength < limit){
                                document.getElementById("next").disabled = true;
                                document.getElementById("lastpage").disabled = true;
                            }else{
                                document.getElementById("next").disabled = false;
                                document.getElementById("lastpage").disabled = false;
                            }

						},
						error:function(data){
							alert('获取数据失败');
						}
					});
                }
				
				
				$("#search").click(function(){
					offset = 0;
					session = $("#session").val();
					grade = $("#grade").val();
					classname = $("#classname").val();
					id = $("#id").val();
					$.ajax({
						type:'POST',
						url:'/studentsearch',
						data:{session:session,grade:grade,classname:classname,id:id, limit: limit, offset: offset},
						dataType:'json',
						success:function(data){
							var vinnertable = document.getElementById("studenttable")
							var vinnerstring = ""
							document.getElementById("errormsg").style.display='none';
							vinnertable.innerHTML = vinnerstring
							datalength = parseInt(data.count[0].count);
							if (data.data.length != 0){
								vinnerstring = '<tr style="background-color: #ccc;"><th class="text-middle headnone" width="2%">№</th><th class="text-middle" width="20%">学号</th><th class="text-middle" width="20%">姓名</th><th class="text-middle" width="10%">性别</th><th class="text-middle" width="20%">班级</th><th class="text-middle" width="28%">联系电话</th></tr>'
								for(i=0; i< data.data.length; i++){
									if(admin == 0){
										vinnerstring += '<tr><td>' + String(i + 1) + '</td><td>' + data.data[i].stu_id + '</td><td>' + data.data[i].name + '</td><td>' + data.data[i].sex + '</td><td>' + String(data.data[i].grade) + '年' + String(data.data[i].class_num) + '班</td><td>' + data.data[i].tele + '</td></tr>'
									}else{
										vinnerstring += '<tr><td>' + String(i + 1) + '</td><td><a class="change" name="change" data-toggle="modal" data-target="#myModal">' + data.data[i].stu_id + '</a></td><td>' + data.data[i].name + '</td><td>' + data.data[i].sex + '</td><td>' + String(data.data[i].grade) + '年' + String(data.data[i].class_num) + '班</td><td>' + data.data[i].tele + '</td></tr>'
									}
								}
								vinnertable.innerHTML = vinnerstring
							}else{
								document.getElementById("errormsg").style.display='block';
								document.getElementById("paging").style.display = 'none';
							}
							document.getElementById("paging").style.display = 'block';
                            document.getElementById("firstpage").disabled = true;
                            document.getElementById("previous").disabled = true;
                            if(datalength <= limit){
                                document.getElementById("next").disabled = true;
                                document.getElementById("lastpage").disabled = true;
                            }else{
                                document.getElementById("next").disabled = false;
                                document.getElementById("lastpage").disabled = false;
                            }

						},
						error:function(data){
							alert('获取数据失败');
						}
					});
				});
				$("#search").trigger("click")

				$("#clear").click(function(){
					$("#session").val("");
					$("#grade").val("");
					$("#classname").val("");
					$("#id").val("");
					session = "";
					grade = "";
					classname = "";
					id = "";
				});
				
				$("#add").click(function(){
					$("#myModalLabel").text("添加信息");	
					$("#dataadd").removeClass("hidden");
					$("#revise").addClass("hidden");
					$("#delete").addClass("hidden");
					$("#studentid").val("");
					$("#studentname").val("");
					$("#ingrade").val("1");
					$("#ingrade").attr("disabled",true); 
					$("#inclassname").val("");
					$("#tele").val("");
					$("#idcard").val("");
					$("input[name=sex][value=男]").prop("checked", true);
					var date = new Date();
					var year = date.getFullYear()
					var id = year
					$.ajax({
						type:'POST',
						url:'/getid',
						data:{id:id},
						dataType:'json',
						success:function(res){
							$("#studentid").val(res.newid);
						},
						error:function(data){
							alert('获取id失败');
						}
					});
						
				});
				$(document).on("click", ".change", function(){
					datarow = $(this);
					$("#myModalLabel").text("修改，删除信息");	
					$("#dataadd").addClass("hidden");
					$("#revise").removeClass("hidden");
					$("#delete").removeClass("hidden");
					$("#studentid").val("");
					$("#studentname").val("");
					$("#ingrade").val("");
					$("#ingrade").attr("disabled",false); 
					$("#inclassname").val("");
					$("#tele").val("");
					$("#idcard").val("");
					$("input[name=sex][value=男]").prop("checked", true);
					var id = this.text
					$("#studentid").val(id)
					$.ajax({
						type:'POST',
						url:'/revisestudent',
						data:{id:id},
						dataType:'json',
						success:function(data){
							$("#studentname").val(data.data[0].name)
							if(data.data[0].sex == '男'){
								$("input[name=sex][value=男]").prop("checked", true);
							}
							else if(data.data[0].sex == '女'){
								$("input[name=sex][value=女]").prop("checked", true);
							}
							$("#ingrade").val(data.data[0].grade)
							$("#inclassname").val(data.data[0].class_num)
							$("#tele").val(data.data[0].tele)
							$("#idcard").val(data.data[0].ID_num)
							console.log("459", data.data[0])

						}
					});	
				});
				$("#dataadd").click(function(){
					var id = $("#studentid").val();
					var name = $("#studentname").val();
					var sex = $("input[type='radio']:checked").val();
					var ingrade = $("#ingrade").val();
					var inclassname = $("#inclassname").val();
					var tele = $("#tele").val();
					var idcard = $("#idcard").val();
					if (!name){
						alert("请输入姓名")
					}else if(!sex){
						alert("请输入性别")
					}else if(!ingrade){
						alert("请输入班级")
					}else if(!inclassname){
						alert("请输入年级")
					}else if(!tele){
						alert("请输入电话")
					}else if(tele.length != 11){
						alert("请输入正确的电话")
					}else if(!idcard){
						alert("请输入身份证号")
					}else if(idcard.length != 18){
						alert("请输入正确的身份证号")
					}else{
						$.ajax({
							type:'POST',
							url:'/studentadd',
							data:{id:id, name:name, sex:sex, ingrade:ingrade, inclassname:inclassname, tele:tele, idcard:idcard},
							dataType:'json',
							success:function(res){
								console.log("111", res.msg)
								alert(res.msg)
								document.getElementById("close").click()
								document.getElementById("search").click()
							},
						});
					}
				});
				$("#revise").click(function(){
					var id = $("#studentid").val();
					var name = $("#studentname").val();
					var sex = $("input[type='radio']:checked").val();
					var ingrade = $("#ingrade").val();
					var inclassname = $("#inclassname").val();
					var tele = $("#tele").val();
					var idcard = $("#idcard").val();
					if (!name){
						alert("请输入姓名")
					}else if(!sex){
						alert("请输入性别")
					}else if(!ingrade){
						alert("请输入班级")
					}else if(!inclassname){
						alert("请输入年级")
					}else if(!tele){ 
						alert("请输入电话")
					}else if(tele.length != 11){
						alert("请输入正确的电话")
					}else if(!idcard){
						alert("请输入身份证号")
					}else if(idcard.length != 18){
						alert("请输入正确的身份证号")
					}else{
						$.ajax({
							type:'POST',
							url:'/studentrevise',
							data:{id:id, name:name, sex:sex, ingrade:ingrade, inclassname:inclassname, tele:tele, idcard:idcard},
							dataType:'json',
							success:function(res){
								alert(res.msg)
								document.getElementById("close").click()
								datarow.parent().next().text(name);
								datarow.parent().next().next().text(sex);
								datarow.parent().next().next().next().text(String(ingrade) + '年' + String(inclassname) + '班');
								datarow.parent().next().next().next().next().text(tele);
							},
						});
					}
				});
				$("#delete").click(function(){
					var id = $("#studentid").val()
					
					$.ajax({
						type:'POST',
						url:'/studentdelete',
						data:{id:id},
						dataType:'json',
						success:function(res){
							alert(res.msg)
							document.getElementById("close").click()
							document.getElementById("search").click()
						},
					});
					
				});
				$("#firstpage").click(function(){
                    offset = 0;
                    dataload(session, grade, classname, id, limit, offset, datalength);
                });

                $("#previous").click(function(){
                    offset = offset - limit;
                    dataload(session, grade, classname, id, limit, offset, datalength);
                });

                $("#next").click(function(){
                    offset = offset + limit;
                    dataload(session, grade, classname, id, limit, offset, datalength);
                });

                $("#lastpage").click(function(){
                    if(datalength % limit == 0){
                        offset = datalength - limit;
                    }else{
                        offset = datalength - (datalength % limit);
                    }
                    dataload(ssession, grade, classname, id, limit, offset, datalength);
                });
                
                $(".pagesize").click(function(){
                    offset = 0;
                    limit = parseInt(this.innerHTML);
                    dataload(session, grade, classname, id, limit, offset, datalength);
                });
				
			});	
		</script>
    </head>
    <body>
        <div th:replace="base/base::baseheader"></div>
        <div class="row content">
            <div th:replace="base/base::basemenu"></div>
            <div class="mainview">
				<form>
					<div class= "content1">
						<div class= "row title">
							<b style="font-size: 26px;"> 学生信息</b>
						</div>
						<div class= "row top">
							<div class="col-md-1">
								<button type="button" class="btn btn-primary btn-sm" id="add" data-toggle="modal" data-target="#myModal"><i class="fa fa-user-plus" aria-hidden="true"></i>  添 加</button>
							</div>
							<div class="col-md-2 tips">
								<label style="margin: 5px auto;" id="tips">
									<span>点击学号修改、删除</span>
								</label>
							</div>
							<div class="col-md-3">
								<select  class="form-control dp_edit radius" name="session" id="session">
									<option value=""  hidden>届</option>
									<option value=""></option>
									<option th:each="item:${Session}" th:value="${item}" th:text="${item}"></option>
								</select>
							</div>
							<div class="col-md-3">
								<select  class="form-control dp_edit radius" name="grade" id="grade">
									<option value=""  hidden>年级</option>
									<option value=""></option>
									<option value="1">1年级</option>
                            		<option value="2">2年级</option>
                            		<option value="3">3年级</option>
								</select>
							</div>
							<div class="col-md-3">
								<select  class="form-control dp_edit radius" name="classname" id="classname">
									<option value=""  hidden>班级</option>
									<option value=""></option>
									<option value="1">1班</option>
		                            <option value="2">2班</option>
		                            <option value="3">3班</option>
		                            <option value="4">4班</option>
		                            <option value="5">5班</option>
								</select>
							</div>
							<div class="col-md-3">
								<input type="text" class="form-control calender dp_edit radius" name="" value="" placeholder="学号" id="id">
							</div>
							<div class="col-md-1" style="padding-right: 0">
								<button type="button" class="btn btn-primary btn-sm" id="search">查 询</button>
							</div>
							<div class="col-md-1" style="padding-left: 0">
								<button type="button" class="btn btn-primary btn-sm" id="clear">清 空</button>
							</div>
						</div>			
						<div>
							<div class="col-md-1"></div>
							<div class="col-md-10" style="height: calc(100vh - 330px);margin-top:30px;overflow-y: auto;">
								<table class="table table-bordered table-hover" id="studenttable">
									
								</table>
								<div id="errormsg"  style="text-align:center; display:none">
										<lable>查无此人，请重新检索</lable>
								</div>
							</div>
							<div class="col-md-1"></div>
						</div>
						<div id="paging" style="height:40px;width:362px;margin: 0 auto;margin-top:calc(100vh - 400px);">
		                    <div class="btn-group" role="group" aria-label="...">
		                        <button type="button" id="firstpage" class="btn btn-default">首页</button>
		                        <button type="button" id="previous" class="btn btn-default">上一页</button>
		                        <button type="button" id="next" class="btn btn-default">下一页</button>
		                        <button type="button" id="lastpage" class="btn btn-default">尾页</button>
		                        <div class="btn-group dropup">
		                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		                                设置每页条数 <span class="caret"></span>
		                            </button>
		                            <ul class="dropdown-menu">
		                                <li><a class="pagesize">5</a></li>
		                                <li><a class="pagesize">10</a></li>
		                                <li><a class="pagesize">15</a></li>
		                                <li><a class="pagesize">20</a></li>
		                            </ul>
		                        </div>
		                    </div>
		                </div>	
						<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" id="close" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="myModalLabel">添加信息</h4>
									</div>
									<div class="modal-body">
										<div class="row">
											<div class="col-md-2" style="margin-top: 5px;">
												<label>学号：</label>
											</div>
											<div class="col-md-8">
												<input type="text" class="form-control calender dp_edit radius" id="studentid" value="" readonly>
											</div>
										</div>
										<div class="row model-margin-top">
											<div class="col-md-2" style="margin-top: 5px;">
												<label>姓名：</label>
											</div>
											<div class="col-md-8">
												<input type="text" class="form-control calender dp_edit radius" id="studentname" value="">
											</div>
										</div>
										<div class="row model-margin-top">
											<div class="col-md-2" style="margin-top: 5px;">
												<label>性别：</label>
											</div>
											<div class="col-md-8" style="margin-top: 5px;">
												<input id="man" type="radio" checked="checked" name="sex" value="男"/>男 &nbsp &nbsp<input id="woman" type="radio"  name="sex" value="女"/>女
											</div>
										</div>
										<div class="row model-margin-top">
											<div class="col-md-2" style="margin-top: 5px;">
												<label>年级：</label>
											</div>
											<div class="col-md-4">
												<select  class="form-control dp_edit radius" id="ingrade">
													<option value=""></option>
													<option value="1">1年级</option>
                            						<option value="2">2年级</option>
                            						<option value="3">3年级</option>
												</select>
											</div>
											<div class="col-md-2" style="margin-top: 5px;">
												<label>班级：</label>
											</div>
											<div class="col-md-4">
												<select  class="form-control dp_edit radius" id="inclassname">
													<option value=""></option>
													<option value="1">1班</option>
						                            <option value="2">2班</option>
						                            <option value="3">3班</option>
						                            <option value="4">4班</option>
						                            <option value="5">5班</option>
												</select>
											</div>
										</div>
										<div class="row model-margin-top">
											<div class="col-md-2" style="margin-top: 5px;">
												<label>电话：</label>
											</div>
											<div class="col-md-8">
												<input type="text" class="form-control calender dp_edit radius" id="tele" value="">
											</div>
										</div>
										<div class="row model-margin-top">
											<div class="col-md-2 idcard" style="margin-top: 5px;">
												<label>身份证号：</label>
											</div>
											<div class="col-md-8 idleft">
												<input type="text" class="form-control calender dp_edit radius" id="idcard" value="">
											</div>
										</div>				
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-primary" id="dataadd">添加</button>
										<button type="button" class="btn btn-primary" id="revise">提交修改</button>
										<button type="button" class="btn btn-primary" id="delete">删除</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
            </div>
        </div>
        <div th:replace="base/base::basefooter"></div>

        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
</html>
